<template>
  <div id="leaderApprove">
    <el-form ref="leaderApproveForm" :model="leaderApproveForm" label-width="90px" :rules="leaderApproveFormRules" id="leaderApproveForm">
      <el-form-item label="司领导" prop="leaderId">
        <el-radio-group v-model="leaderApproveForm.leaderId">
          <el-radio :label="item.value" v-for="(item, index) of szList" :key="index">{{item.name}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="批示日期" prop="sendTime">
        <el-date-picker v-model="leaderApproveForm.sendTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>
      <div style="clear:both"></div>
      <el-form-item label="批示内容" prop="opinion">
        <el-autocomplete :trigger-on-focus="false" :fetch-suggestions="querySearch" v-model="leaderApproveForm.opinion" style="width:830px" :maxlength="200"></el-autocomplete>
      </el-form-item>
    </el-form>
    <el-button @click="leaderApproveSubmit" type="success" :loading="submitLoading" style="margin-left:90px">保存</el-button>
  </div>
</template>

<script>
export default {
  props: ['personId', 'step', 'szData'],
  watch: {
    personId: {
      handler (newName, oldName) {
        console.log(newName)
      },
      immediate: true
    },
    step: {
      handler (newName, oldName) {
        console.log(newName)
      },
      immediate: true
    },
    szData: {
      handler (newName, oldName) {
        console.log(newName)
        this.szList = unique(newName)
        function unique (arr) {
          const res = new Map()
          return arr.filter((arr) => !res.has(arr.value) && res.set(arr.value, 1))
        }
      },
      immediate: true
    }
  },
  data () {
    return {
      szList: [],
      submitLoading: false,
      leaderApproveFormRules: {
        leaderId: [{ required: true, message: '请选择司领导', trigger: 'blur' }],
        sendTime: [{ required: true, message: '请输入批示日期', trigger: 'blur' }],
        opinion: [{ required: true, message: '请输入批示内容', trigger: 'blur' }]
      },
      leaderApproveForm: {
        leaderId: '',
        opinion: '',
        sendTime: ''
      }
    }
  },
  methods: {
    querySearch (queryString, cb) {
      return this.getNotice(this, queryString, cb)
    },
    getNotice (self, queryString, cb) {
      let leaderName = ''
      for (let item of this.szData) {
        if (item.value === this.leaderApproveForm.leaderId) {
          leaderName = item.name
        }
      }
      let para = {
        key: queryString,
        realName: leaderName
      }
      self.$http
        .post(this.$http.defaults.selectionAPI + `api/selection/home/getMatchedOpinions`, para)
        .then(function (response) {
          console.log('获取成功')
          var results = response.data.result
          let newArr = []
          results.forEach(function (item) {
            let obj = {'value': item}
            newArr.push(obj)
          })
          cb(newArr)
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    leaderApproveSubmit () {
      this.$refs['leaderApproveForm'].validate((valid) => {
        if (valid) {
          let para = {
            'leaderId': this.leaderApproveForm.leaderId,
            'opinion': this.leaderApproveForm.opinion,
            'personId': this.personId,
            'sendTime': this.leaderApproveForm.sendTime,
            'step': this.step
          }
          this.submitLoading = true
          this.$http
            .post(this.$http.defaults.selectionAPI + `api/selection/approve/saveFakeLeaderApprove`, para)
            .then(response => {
              this.submitLoading = false
              if (response.data.success) {
                this.$message({
                  message: '保存成功',
                  type: 'success'
                })
                this.$refs['leaderApproveForm'].resetFields()
                this.$emit('closeDialog')
              } else {
                this.$message({
                  message: '保存失败:' + response.data.message,
                  type: 'error'
                })
              }
            })
            .catch(error => {
              this.submitLoading = false
              console.log(error)
              this.$message({
                message: '网络保存失败:' + error,
                type: 'error'
              })
            })
        }
      })
    }
  }
}
</script>
